import React, { useState, useEffect, useRef, useReducer } from 'react';
export default function VoteHook(props) {
	let [supNum, changeSup] = useState(0);
	let [oppNum, changeOpp] = useState(0);

	//=>让其拥有生命周期函数
	/* useEffect(() => {
		// componentDidMount和componentDidUpdate
		console.log('OK');
	}); */
	/* useEffect(() => {
		// componentDidMount
		console.log('OK');
	}, []); */
	/* useEffect(() => {
		return () => {
			// componentDidUpdate
			console.log(document.getElementById('num').innerHTML);
		};
	}); */
	/* useEffect(() => {
		// 指定依赖项，只有xxx更改，才会触发
		console.log('OK');
	}, [supNum]); */

	//=>让其可以进行DOM操作
	// 1.使用REF
	let num = useRef();

	return <section>
		<header>
			<h3>{props.title}</h3>
			{/* 2.想要获取哪个DOM元素就给其赋值给DOM的ref属性 */}
			<span ref={num}>N:{supNum + oppNum}</span>
		</header>
		<main>
			<p>支持人数：{supNum}</p>
			<p>反对人数：{oppNum}</p>
		</main>
		<footer>
			<button onClick={ev => {
				changeSup(++supNum);
			}}>支持</button>
			<button onClick={ev => {
				changeOpp(++oppNum);
			}}>反对</button>
			<button onClick={ev => {
				// 3.基于current属性可以获取到DOM元素
				console.log(num.current.innerHTML);
			}}>使用DOM</button>
		</footer>
	</section>;
};

// export default function VoteHook(props) {
// 	//=>需要管控两个状态，此时我们采用的是一个变量存储对象的格式来玩
// 	let [state, changeNum] = useState(function init() {
// 		// 初始值写成函数方式的好处：
// 		// 1.可以在这里根据不同业务场景，赋值不一样的初始值
// 		// 2.只会在第一次渲染组件的时候赋值初始值，后期组件重新渲染，当前操作不在执行，属于一个优化操作
// 		return {
// 			supNum: 0,
// 			oppNum: 0
// 		};
// 	});
// 	return <section>
// 		<header>
// 			<h3>{props.title}</h3>
// 			<span>N:0</span>
// 		</header>
// 		<main>
// 			<p>支持人数：{state.supNum}</p>
// 			<p>反对人数：{state.oppNum}</p>
// 		</main>
// 		<footer>
// 			<button onClick={ev => {
// 				//=>和setState不一样的地方，它不能实现局部状态更新，每一次更新都是把之前的值改成一个新值（稍不注意就会把之前的某个状态干没）；所以在修改之前，我们最好先把之前的值克隆一份！
// 				changeNum({
// 					...state,
// 					supNum: ++state.supNum
// 				});
// 			}}>支持</button>
// 			<button>反对</button>
// 		</footer>
// 	</section>;
// };

/*
 * React Hooks
 *   REACT提供的HOOKS函数，目的是让“函数式组件”能拥有类似于“类组件”的一些效果
 *   => useState在函数式组件中应用状态
 *   => useEffect 拥有生命周期函数
 *   => useRef 让其使用DOM
 *   => useReducer 让其能够像redux一样管理状态
 *   => ......
 */
// export default function VoteHook(props) {
// 	/*
// 	 * useState：应用状态 
// 	 *   @params
// 	 *      initState初始状态值（也可以是个函数，函数中返回初始状态值）
// 	 *   @return 
// 	 *      数组：[状态,更改状态的方法]
// 	 */
// 	let [supNum, changeSupNum] = useState(0);
// 	return <section>
// 		<header>
// 			<h3>{props.title}</h3>
// 			<span>N:0</span>
// 		</header>
// 		<main>
// 			<p>支持人数：{supNum}</p>
// 			<p>反对人数：0</p>
// 		</main>
// 		<footer>
// 			<button onClick={ev => {
// 				// 更改状态（直接传递需要更改的值即可）：会通知组件重新渲染，类似于setState操作
// 				changeSupNum(++supNum);
// 			}}>支持</button>
// 			<button>反对</button>
// 		</footer>
// 	</section>;
// };